forum

home / developersection / forums / how to stop auto-fill in browsers for textbox.

Ask Question
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Jan-2016

We are looking browsers like Chrome, Firefox, Internet Explorer and Safari has functionality of auto complete values in TextBoxes.
If we have enabled this feture in your browser, then each and every time when you start to enter value in TextBox we
get a drop down of prefilled values in that TextBox. This feature of browser can be disabled by the programming for a specific
web form like Login form and other confidential data form of a web page.
In chrome browser, we can enable auto-fill as shown below :

if we want to set Autofill textbox in browser .then go to browser setting 

How to Stop auto-fill in browsers for textbox.

if  we want to disable prefilled  value in textbox when browser  have enable Autofill.

<form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
        </form> 

Like below Full login form code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Fourm.aspx.cs" Inherits="Forumasp.Fourm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Menu - Categories</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
   <div class="login-body">
    <article class="login-box center-block">
  <section>
   <ul id="top-bar" class="nav nav-tabs nav-justified">
   
     <li class=""><a href="#login-access">Customer Login</a></li> 
   </ul>
   <div class="tab-content tabs-login col-lg-12 col-md-12 col-sm-12 cols-xs-12">
    <div id="login-access" class="tab-pane fade active in">
     <h2><i class="glyphicon glyphicon-log-in"></i> Login</h2>      
     <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
      <div class="form-group ">
       <label for="login" class="sr-only">Email</label>
        <input type="text" class="form-control" name="login" id="login_value" 
         placeholder="Email" tabindex="1" value="" />
      </div>
      <div class="form-group ">
       <label for="password" class="sr-only">Password</label>
        <input type="password" class="form-control" name="password" id="password"
         placeholder="Password" value="" tabindex="2" />
      </div>
      <div class="checkbox">
        <label class="control-label" for="remember_me">
         <input type="checkbox" name="remember_me" id="remember_me" value="1" class="" tabindex="3" /> Remember
        </label>
      </div>
      <br/>
      <div class="form-group ">    
        <button type="submit" name="log-me-in" id="submit" tabindex="5" class="btn btn-lg btn-primary">Login</button>
      </div>
     </form>   
    </div>
   </div>
  </section>
 </article>
</div>
</body>
    <style>        
body {
    font-family: Open Sans;
    font-size: 14px;
    line-height: 1.42857;
    background: #333333;
    height: 350px;
    padding: 0;
    margin: 0;
}
.login-box {
    min-height: 0;
    width: 480px;
    color: #333333;
    margin-top: 40px;
    padding: 0;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.login-box > section {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 10px;
}
#top-bar {
    display: inherit;
}
.nav-tabs.nav-justified {
    border-bottom: 0 none;
    width: 100%;
}
.nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
    float: none;
}
.login-box .nav-tabs.nav-justified > li > a,
.login-box .nav-tabs.nav-justified > li > a:hover,
.login-box .nav-tabs.nav-justified > li > a:focus {
    background: #ea533f;
    border: medium none;
    color: #ffffff;
    margin-bottom: 0;
    margin-right: 0;
    border-radius: 0;
}
.login-box .nav-tabs.nav-justified > .active > a,
.login-box .nav-tabs.nav-justified > .active > a:hover,
.login-box .nav-tabs.nav-justified > .active > a:focus {
    background: #ffffff;
    color: #333333;
}
.login-box .nav-tabs.nav-justified > li > a:hover,
.login-box .nav-tabs.nav-justified > li > a:focus {
    background: #de2f18;
}
.tabs-login {
    background: #ffffff;
    border: medium none;
    margin-top: -1px;
    padding: 10px 30px;
}
.login-box h2 {
    color: #ea533f;
}
.form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #999999;
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.login-box .checkbox {
    margin-top: -15px;
}
.login-box button {
    background-color: #ea533f;
    border-color: #e73e28;
    color: #ffffff;
    border-radius: 0;
    font-size: 18px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 100%;
}
.login-box button:hover,
.login-box button:focus {
    background: #de2f18;
    border-color: #be2815;
}
 

    </style>
</html>
How to Stop auto-fill in browsers for textbox.

 

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy